<template>
	<div class="searchpage">
		<div class="top">
			<div class="top01">
				<span @click="getHome" class="back">&lt;</span>
				<input type="text" placeholder="刀剑神域" v-model="text" />
				<span @click="getHome" v-if="flag">取消</span>
				<span @click="getSearch" v-else>搜索</span>
			</div>
		</div>

		<div class="middle">
			<div class="contentimg" @click="getMp4" v-if="this.arrdata.img">
				<img :src="this.arrdata.img" alt="" class="imga" />
				<div class="contentimg_text">
					<div>
						<span>{{ this.arrdata.name }}</span>
					</div>
					<div class="dv_texts">
						<div class="one">
							<div class="dv_text">
								<div>
									<svg class="icon" aria-hidden="true" fill="#999999"><use xlink:href="#icon-UPzhu"></use></svg>
								</div>
								<div><span class="texts">重力—重力</span></div>
							</div>
						</div>
						<div class="two">
							<div class="dv_text">
								<div>
									<svg class="icon" aria-hidden="true" fill="#999999"><use xlink:href="#icon-bofangshu"></use></svg>
								</div>
								<div><span class="texts">5.6万</span></div>
							</div>
							<div class="dv_text">
								<div>
									<svg class="icon" aria-hidden="true" fill="#999999"><use xlink:href="#icon-comment"></use></svg>
								</div>
								<div><span class="texts">124</span></div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="imgBottom" v-if="this.content">
				<img src="https://s1.hdslb.com/bfs/static/jinkela/mstation-h5/asserts/noContent.png" alt="" class="noneImg" />
				<span>没有你要找的内容</span>
			</div>
		</div>
		<div v-if="history">
			<div class="clearhistory">搜索历史</div>
			<div class="hisitem">
				<div v-for="item in bbb" :key="item.id">
					<span @click="getNewSearch(item)">{{ item }}</span>
				</div>
			</div>
			<div class="clearhistory" @click="getclear" v-if="clears">清空搜索历史</div>
		</div>
	</div>
</template>

<script>
import { Dialog } from 'vant';
export default {
	data() {
		return {
			text: '',
			flag: true,
			arrdata: [],
			content: false,
			historyWord: [],
			aaa: [],
			bbb: [],
			history: true,
			clears: true
		};
	},
	methods: {
		getHome() {
			this.$router.push('/');
		},
		async getSearch() {
			if (localStorage.getItem('token') && localStorage.getItem('id')) {
				if (this.text.length < 2) {
					// console.log()
					this.$msg.fail('最少输入两个字符');
					return; //结束且不再往下执行
				}
				if (
					this.text == '专业团队' ||
					this.text == '原版视频' ||
					this.text == '视频' ||
					this.text == '黑人' ||
					this.text == '专业' ||
					this.text == '团队' ||
					this.text == '原版'
				) {
					this.content = false;
					const res = await this.$http.get('/commend');
					const arr = res.data;
					const arrdata = arr.slice(9);
					console.log(arrdata[0]);
					this.arrdata = arrdata[0];
				} else {
					this.content = true;
					this.arrdata = [];
				}
				let abc = localStorage.getItem('word');
				if (abc == null) {
					let ioio = [];
					ioio.push(this.text);
					localStorage.setItem('word', ioio);
					return; //禁止向下执行
				}
				let qqq = abc.split(','); //变成数组,用逗号分隔
				qqq.push(this.text);
				let set = new Set(qqq);
				let newArr = Array.from(set);
				if (newArr.length > 8) {
					// 只保留8条数据
					newArr.splice(0, 1); //删除索引为0的，删除一个
				}
				console.log(newArr);
				localStorage.setItem('word', newArr);
				// 隐藏搜索历史
				if (this.content == true || this.arrdata.img != '') {
					this.history = false;
					console.log('应该隐藏搜索历史');
				} else {
					console.log('应该显示搜索历史');
				}
			} else {
				this.$msg.fail('请先登录');
			}
		},
		getMp4() {
			this.$router.push(`/article/${this.arrdata.id}`);
		},
		historyWords() {
			if (localStorage.getItem('word')) {
				this.aaa = localStorage.getItem('word');
				this.bbb = this.aaa.split(','); //split变成数组
				console.log(this.bbb);
				// 如果有让搜索历史显示
				this.clears = true;
				this.history = true;
			} else {
				// 否则让搜索历史隐藏
				this.clears = false;
				this.history = false;
			}
		},
		async getNewSearch(item) {
			this.text = item;
			await this.getSearch();
		},
		getclear() {
			Dialog.confirm({
				message: '确认清除全部历史记录吗',
				confirmButtonColor: '#3497FB'
			})
				.then(() => {
					console.log('清除');
					this.history = false;
					localStorage.removeItem('word');
				})
				.catch(() => {
					console.log('未清除');
				});
		}
	},
	watch: {
		text() {
			if (this.text) {
				this.flag = false;
			} else {
				this.flag = true;
			}
		}
	},
	created() {
		this.historyWords();
	}
};
</script>

<style scoped lang="less">
.searchpage {
	background-color: white;
	height: 667px;
}
.top {
	background-color: #fb7299;
	.top01 {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	input {
		outline: none;
		border: none;
		border-radius: 3.333vw;
		padding: 2px 80px 2px 16px;
		font-size: 14px;
		height: 23px;
		line-height: 23px;
	}
	span {
		margin-left: 8px;
		color: white;
		margin-right: 12px;
	}
}
.imga {
	width: 200px;
	height: 122px;
}
.middle {
	display: flex;
}
.contentimg {
	display: flex;
	// flex-direction: column;
	// border: 1px solid red;
	margin-top: 5px;
	.contentimg_text {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 8px 8px 0px 8px;
		// border: 1px solid red;
	}
}
.back {
	font-size: 26px;
	margin-right: -13px;
	padding-left: 12px;
}
.imgBottom {
	width: 100%;
	height: 280px;
	padding-bottom: 20px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.noneImg {
	width: 280px;
	height: 160px;
}
.hisitem {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	div {
		margin: 5px;
		padding: 5px 18px 5px 18px;
		background-color: #f4f4f4;
		font-size: 12px;
	}
}
.clearhistory {
	font-size: 15px;
	margin: 8px;
}
.texts {
	font-size: 14px;
	color: #999;
	display: block;
	margin-bottom: 3px;
	margin-left: 4px;
}
.dv_text {
	// border: 1px solid red;
	display: flex;
	align-items: center;
	margin-right: 3px;
	margin-left: 3px;
}

.dv_texts {
	display: flex;
	flex-direction: column;
	// flex-wrap: wrap;
}
.one {
	display: flex;
	margin-bottom: 2px;
	align-items: center;
}
.two {
	display: flex;
	align-items: center;
}
</style>
